<template>
  <view class="ytab-home">
    <view class="ytab-tab">
      <view
        v-for="(item, index) in footerTabbar"
        :key="index"
        @click="onTabbarClick(index, item)"
      >
        <i
          :class="['iconfont', 'icon-' + item.icon, { si: Sindex == index }]"
        ></i>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      footerTabbar: this.$store.state.footerTabbar,
      Sindex: 0,
    };
  },
  methods: {
    // 点击tabbar
    onTabbarClick(index, item) {
      this.Sindex = index;
      // 存入缓存
      uni.setStorageSync("Sindex", index);
      uni.setStorageSync("Sindex2", index);
      // 回调
      this.$emit("yt", { index, item });
    },
  },
  created: function () {
    // 初始化
    this.Sindex = uni.getStorageSync("Sindex") || 0;
    // console.log("Sindex", this.Sindex);
  },
};
</script>
<style lang="scss" scoped>
.ytab-home {
  display: flex;
  width: 100vw;
  box-sizing: border-box;
  position: absolute;
  bottom: 20px;
  height: 70px;
  z-index: 9999;
  justify-content: center;
  // transition: all 0.3s;

  .ytab-tab {
    // left: 20px;
    width: 85%;
    // margin: 0 auto;
    border-radius: 40px;
    background-color: #f5f6f7;
    // z-index: 999;
    padding: 5px 15px;

    display: inline-flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

    i {
      font-size: 30px;
      color: #cdcecf;
      padding: 13px;
      border-radius: 30px;
    }
  }
}

.si {
  color: red !important;
  background-color: #fff;
  transition: all 0.8s;
  box-shadow: 0px 31px 22px 0px rgba(0, 0, 0, 0.09);
}
</style>
